<script>
import {editSpecsRows, totalValue} from "@/views/modals/specsRows.config";
import request from "@/utils/request";
import {message} from "ant-design-vue";
import {getTMCTotal} from "@/views/home/config";

export default {
  name: "editSpecsModal",
  data() {
    return {
      dialogFormVisible: false,
      editSpecsRows,
      modalTitle: '',
      totalValue: 0,
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
      form: {
        id: '',
        nonDM: { price: 0, note: '' },
        royalty_sw: { price: 0, note: '' },
        mva: { price: 0, note: '' },
        logistics: { price: 0, note: '' },
        quallty: { price: 0, note: '' },
        tooling_scrap: { price: 0, note: '' },
        baseUnit: { price: 0, note: '' },
        me_cmf: { price: 0, desc: '', note: '' },
        rf: { price: 0, desc: '', note: '' },
        nfc: { price: 0, desc: '', note: '' },
        wifi: { price: 0, desc: '', note: '' },
        dp: { price: 0, desc: '', note: '' },
        audio: { price: 0, desc: '', note: '' },
        charging: { price: 0, desc: '', note: '' },
        wlc: { price: 0, desc: '', note: '' },
        pkg: { price: 0, desc: '', note: '' },
        ip: { price: 0, desc: '', note: '' },
        acc: { price: 0, desc: '', note: '' },
        sensors: { price: 0, desc: '', note: '' },
        roBU: { price: 0, desc: '', note: '' },
        chipset: { price: 0, desc: '', note: '' },
        memory: { price: 0, desc: '', note: '' },
        charger: { price: 0, desc: '', note: '' },
        battery: { price: 0, desc: '', note: '' },
        display1: { price: 0, desc: '', note: '' },
        display2: { price: 0, desc: '', note: '' },
        cam1: { price: 0, desc: '', note: '' },
        cam2: { price: 0, desc: '', note: '' },
        cam3: { price: 0, desc: '', note: '' },
        cam4: { price: 0, desc: '', note: '' },
        cam5: { price: 0, desc: '', note: '' },
        fCam1: { price: 0, desc: '', note: '' },
        fCam2: { price: 0, desc: '', note: '' },
        fps: { price: 0, desc: '', note: '' },
      }
    }
  },
  methods: {
    show(data) {
      this.modalTitle = data.projectName + ' Specs View'
      Object.keys(this.form).forEach(key => {
        if (data[key]) {
          this.form[key] = data[key]
        }
      })

      this.handlePriceChange()
      this.editSpecsRows = editSpecsRows.filter(item => !item.isText)
      this.totalValue = getTMCTotal({ specs: this.form })
      this.dialogFormVisible = true
    },
    handlePriceChange(field) {
      if (field) {
        this.form[field].price = parseFloat(Number(this.form[field].price).toFixed(2))
      }

      this.form.nonDM.price = 0
      totalValue.nonDm.forEach(field => {
        this.form.nonDM.price += this.form[field].price || 0
      })
      this.form.nonDM.price = parseFloat(Number(this.form.nonDM.price).toFixed(2))
      this.form.baseUnit.price = 0
      totalValue.baseUnit.forEach(field => {
        this.form.baseUnit.price += this.form[field].price || 0
      })
      this.form.baseUnit.price = parseFloat(Number(this.form.baseUnit.price).toFixed(2))
    }
  }
}

</script>

<template>
  <a-modal v-model:open="dialogFormVisible" width="35vw" :title="modalTitle" style="top: 0px">
    <a-form :model="form" ref="formRef">
      <a-form-item v-for="item in editSpecsRows" :key="item.field" :name="item.field" :label-col="labelCol" :wrapper-col="wrapperCol">
        <template #label>
          <div :class="item.children ? 'edit-specs-children-label' : 'edit-specs-label'">{{ item.label }}</div>
        </template>
        <div class="edit-specs-row">
          <span class="edit-specs-row-price"> {{ form[item.field].price }} </span>
          <span v-if="!item.noDesc" style="padding-left: 20px;"> {{ form[item.field].desc }} </span>
        </div>
      </a-form-item>
      <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol">
        <template #label>
          <div class="edit-specs-label">Total</div>
        </template>
        <div class="edit-specs-row">
          <span class="edit-specs-row-price"> {{ totalValue }}</span>
        </div>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<style scoped lang="scss">
.edit-specs-row {
  display: flex;
  align-items: center;
  ::v-deep .ant-input-number-input{
    text-align: right;
    padding-right: 32px;
  }
  ::v-deep .ant-input-number-input[disabled] {
    background: #fff;
    color: #000;
    font-weight: 600;
  }
  .edit-specs-row-price{
    color: #000;
    font-weight: bold;
    width: 13%;text-align: right;
  }
}
.edit-specs-label{
  text-align: left;
}
.edit-specs-children-label{
  color: #999;
  padding-right: 10px;
}
.ant-form-item{
  margin-bottom: 2px;
  height: 24px;
}
::v-deep .ant-form-item-label label{
  width: 100%;
  &::after{
    display: none;
  }
  div{
    width: 100%;

  }
}
</style>
